<template>
  <div class="main-ui-bg">
    <div class="main-ui">
  <el-card class="main-card">
      <div class="main-title">
        <img src="https://img.alicdn.com/imgextra/i2/6000000000422/O1CN01Qn6QwB1QbQbQbQbQb_!!6000000000422-2-tps-200-200.png" class="main-logo" />
        AI直播助手
      </div>
      <div class="main-desc">欢迎使用 <span class="main-highlight">AI直播助手</span>！请选择功能：</div>
      <el-divider />
          <el-row class="main-btn-row">
            <el-button type="primary" @click="$emit('showConfig')" class="main-btn">配置中心</el-button>
            <el-button type="success" @click="$emit('showQr')" class="main-btn">扫码登录</el-button>
            <el-button type="warning" @click="showConsole = !showConsole" class="main-btn">控制台</el-button>
          </el-row>
          <ConsolePanel v-if="showConsole" :visible="showConsole" @close="showConsole = false" />
        <div class="main-tip">让AI助力你的直播，轻松玩转弹幕互动！</div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import ConsolePanel from './ConsolePanel.vue'
const showConsole = ref(false)
// 监听主界面被切换时自动关闭控制台
watch(() => [showConsole.value], ([v]) => {
  if (!v) showConsole.value = false
})
</script>
<style scoped>
.main-ui-bg, .main-ui, body {
  scrollbar-width: none !important;
}
.main-ui-bg::-webkit-scrollbar, .main-ui::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}
.main-tip {
  margin-top: 18px;
  text-align: center;
  color: #b48ad6;
  font-size: 1.08rem;
  letter-spacing: 1px;
  font-weight: 500;
  text-shadow: 0 1px 6px #f3eaff;
}
body {
  background: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.main-ui-bg {
  min-height: 100vh;
  min-width: 0;
  background: linear-gradient(135deg, #f8e1f4 0%, #e0f7fa 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.main-ui {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 48px;
  background: transparent;
  overflow-x: hidden;
}
.main-card {
  width: 440px;
  border-radius: 40px;
  box-shadow: 0 8px 32px 0 rgba(255, 144, 179, 0.18);
  background: #fff6fa;
  padding: 44px 36px 36px 36px;
  border: none;
  transition: box-shadow 0.2s;
}
.main-card:hover {
  box-shadow: 0 12px 36px 0 #ffd6e6;
}
.main-title {
  font-size: 2.2rem;
  font-weight: bold;
  color: #ff90b3;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.main-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 8px #ffd6e6;
  background: #fff6fa;
}
.main-desc {
  color: #888;
  margin-bottom: 18px;
  text-align: center;
}
.main-highlight {
  color: #ff90b3;
  font-weight: bold;
}
.main-btn-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 10px;
}
.main-btn {
  min-width: 120px;
  font-size: 1.1rem;
  border-radius: 18px;
  font-weight: bold;
  box-shadow: 0 2px 8px #ffd6e6;
  transition: filter 0.15s, box-shadow 0.15s;
}
.main-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px #ffd6e6;
}
</style>
